js中常见的几种对象遍历方式Object

您所在的位置：网站首页 › for in能遍历对象吗 › js中常见的几种对象遍历方式Object

js中常见的几种对象遍历方式Object

2024-07-11 01:28:02| 来源: 网络整理| 查看: 265

一：自身可枚举属性 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致。如果对象的键-值都不可枚举，那么将返回由键组成的数组。这是合理的，因为大多数时候只需要关注对象自身的属性。来看看一个对象拥有自身和继承属性的例子，Object.keys()只返回自己的属性键：

let simpleColors = { nameA: 'a', nameB: 'b' }; let natureColors = { colorC: 'green', colorD: 'yellow' }; Object.setPrototypeOf(natureColors, simpleColors); Object.keys(natureColors); // => ['colorC', 'colorD'] natureColors['nameA']; // => 'a' natureColors['nameB']; // => 'b'

Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或 null。 Object.keys(natureColors)返回natureColors对象的自身可枚举属性键：['colorC'，'colorD']。 natureColors包含从simpleColors原型对象继承的属性，但是Object.keys()函数会跳过它们。 Object.values() 和 Object.entries() 也都是返回一个给定对象自身可枚举属性的键值对数组

Object.values(natureColors); // => ['green', 'yellow'] Object.entries(natureColors); // => [ ['colorC', 'green'], ['colorD', 'yellow'] ]

现在注意与for..in语句的区别，for..in不仅可以循环枚举自身属性还可以枚举原型链中的属性

let enumerableKeys = []; for (let key in natureColors) { enumerableKeys.push(key); } enumerableKeys; // => ['colorC', 'colorD', 'nameA', 'nameB']

enumerableKeys数组包含natureColors自身属性键: 'colorC'和'colorD'。

另外for..in也遍历了从simpleColors原型对象继承的属性

二：Object.values() 返回属性值 **Object.values()**方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

例如我们可以使用Object.keys()收集keys，然后通过 key 去对象取对应的值：

let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner' }; for (let key of Object.keys(meals)) { let mealName = meals[key]; // ... do something with mealName console.log(mealName); } // 'Breakfast' 'Lunch' 'Dinner'

meal是一个普通对象。使用Object.keys(meals)和枚举的for…of循环获取对象键值。代码看起来很简单，但是，let mealName = meals[key] 没有多大的必要，可以进一步优化，如下：

let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner' }; for (let mealName of Object.values(meals)) { console.log(mealName); } // 'Breakfast' 'Lunch' 'Dinner'

因为Object.values(meals)返回数组中的对象属性值，所以可以直接在 for..of 中简化。 mealName直接在循环中赋值。

三：Object.entries() **Object.entries()**方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

Object.entries() 返回键值对数组，如 [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。可能直接使用这些键值对不怎么方便，但可以通过数组解构赋值方式访问键和值就变得非常容易，如下所示：

let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner' }; for (let [key, value] of Object.entries(meals)) { console.log(key + ':' + value); } // 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'

如上所示，因为 Object.entries()返回一个与数组解构赋值兼容的集合，因此不需要为赋值或声明添加额外的行。

当普通对象要转换成 Map 时Object.entries() 就很有用，因为Object.entries() 返回的格式与Map构造函数接受的格式完全相同：(key,value)。

使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象。来个例子，让人缓缓：

let greetings = { morning: 'Good morning', midday: 'Good day', evening: 'Good evening' }; let greetingsMap = new Map(Object.entries(greetings)); greetingsMap.get('morning'); // => 'Good morning' greetingsMap.get('midday'); // => 'Good day' greetingsMap.get('evening'); // => 'Good evening'

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值

有趣的是，Map提供了与Object.values()和Object.entries() 等效的方法（只是它们返回Iterators），以便为Map实例提取属性值或键值对：

Map.prototype.values() 等价于Object.values()

Map.prototype.entries() 等价于Object.entries()`

map是普通对象的改进版本，可以获取 map 的大小(对于普通对象，必须手动获取)，并使用任意对象类型作为键(普通对象使用字符串基元类型作为键)。让我们看看返回.values（）和.entries（）的map的方法：

[...greetingsMap.values()]; // => ['Good morning', 'Good day', 'Good evening'] [...greetingsMap.entries()]; // => [ ['morning', 'Good morning'], ['midday', 'Good day'], // ['evening', 'Good evening'] ]

注意，greetingsMap.values()和greetingsMap.entries()返回迭代器对象。若要将结果放入数组，扩展运算符…是必要的。

四：对象属性的顺序

JS 对象是简单的键值映射，因此，对象中属性的顺序是微不足道的，在大多数情况下，不应该依赖它。在ES5和早期标准中，根本没有指定属性的顺序。然而，从ES 6开始，属性的顺序是基于一个特殊的规则的，除非特指按照时间排序。通过两个新方法Object.getOwnPropertyNames和Reflect.ownKeys来编写示例讲解这一属性排序规则。

数字：当属性的类型时数字类型时，会按照数字的从大到小的顺序进行排序；字符串：当属性的类型是字符串时，会按照时间的先后顺序进行排序； Symbol：当属性的类型是Symbol时，会按照时间的先后顺序进行排序。如果需要有序集合，建议将数据存储到数组或Set中。

五：结束语

Object.values() 和Object.entries() 是为JS开发人员提供新的标准化辅助函数的另一个改进步骤。 Object.entries()最适用于数组解构赋值，其方式是将键和值轻松分配给不同的变量。此函数还可以轻松地将纯JS对象属性映射到Map对象中。、注意，Object.values()和Object.entries()返回数据的顺序是不确定的，所以不要依赖该方式。

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

js中常见的几种对象遍历方式Object

js中常见的几种对象遍历方式Object

今日新闻

点击排行

推荐新闻

图片新闻

专题文章